<template>
	<view>
		<view class="list-card" v-if="!!list.length">
			<uni-card v-for="item in list" :key="item.id" :title="'货品代码：' + item.goodsCode">
				<view class="item">
					<view>
						<label>货品名称：</label>
						<text>{{item.goodsName || '-'}}</text>
					</view>
				</view>
				<view class="item">
					<view>
						<label>货位代码：</label>
						<text>{{item.goodsLocationCode || '-'}}</text>
					</view>
				</view>
				<view class="item">
					<view class="item-content">
						<label>库存数量：</label>
						<text>{{parseInt(item.stockNumber || 0)}}</text>
					</view>
					<view class="item-content">
						<label>盘点数量：</label>
						<text :style="{color: parseInt(item.stockNumber || 0) !== parseInt(item.checkNumber || 0) ? '#FF0000' : ''}">{{parseInt(item.checkNumber || 0)}}</text>
					</view>
				</view>
			</uni-card>
			<uni-load-more :status="loadMoreStatus"></uni-load-more>
		</view>
		<no-data :visible="!list.length" title="暂无数据" :fullscreen="true"></no-data>
	</view>
</template>

<script>
	import noData from '@/components/no-data/no-data.vue';

	export default {
		components: {
			noData
		},
		props: {
			checkId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				params: {
					limit: global.$limit,
					page: 1,
					warehouseId: this.$storage.getWarehouseId(),
					initialState: '300'
				},
				list: [],
				loadMoreStatus: global.$loadMoreStatus.more
			}
		},
		watch: {
			checkId: {
				handler() {
					this.fetch();
				},
				immediate: true
			}
		},
		methods: {
			pullDownRefresh() {
				this.params.page = 1;
					this.fetch();
			},
			reachBottom() {
				if (this.loadMoreStatus === global.$loadMoreStatus.more) {
					this.loadMoreStatus = global.$loadMoreStatus.loading;
					this.params.page++;
					this.fetch();
				}
			},
			fetch() {
				this.$api.stockCheck.initialPlateList(Object.assign(this.params, {
					checkId: this.checkId
				})).then(res => {
					this.list = this.params.page === 1 ? [...res.data] : [...this.list, ...res.data];
					this.loadMoreStatus = this.$pageHelper.lastPage(this.params.limit, this.params.page, res.count) ?
						global.$loadMoreStatus.noMore : global.$loadMoreStatus.more;
					uni.stopPullDownRefresh();
				}, () => uni.stopPullDownRefresh());
			}
		},
	}
</script>

<style lang="scss" scoped>
	.list-card /deep/ .uni-card {
		margin: 0 0 30rpx 0;
	}

	.list-card /deep/ .uni-card .uni-card__header {
		padding: 10rpx 24rpx;
	}

	.uni-load-more {
		margin-top: -30rpx;
	}
</style>
